<template>
	<div class="echart-container" ref="echarts" v-resize="handleResize"></div>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		name: "eharts-option",
		props: {
			config: {
				type: Object
			},
			option: {
				type: Object
			},
		},
		directives: {
			resize: {
				bind(e, binding) {
					let width = 0;
					let height = 0;
					const isReize = () => {
						let offsetWidth = e.offsetWidth;
						let offsetHeight = e.offsetHeight;
						if (width !== offsetWidth || height !== offsetHeight) {
							const value = {
								width: offsetWidth,
								height: offsetHeight
							}
							binding.value(value);
						}
						width = offsetWidth;
						height = offsetHeight;
					}
					e.__vueSetInterval__ = setInterval(isReize, 300);
				},
				unbind(e) {
					clearInterval(e.__vueSetInterval__);
				}
			}
		},
		watch: {
			option: {
				deep: true,
				handler(val) {
					console.log(val,'监听option');
					this.initChart(val);
				},
			},
		},
		mounted() {
			this.$nextTick(() => {
				this.initChart(this.option);
			});
		},
		methods: {
			handleResize(data) {
				this.initChart(this.option);
			},
			initChart(option) {
				var _this = this;
				if (this.chart != null && this.chart != "" && this.chart != undefined) {
					this.chart.dispose();
				}
				
				this.chart = echarts.init(this.$el);
				this.chart.setOption(option);
			}
		}
	}
</script>

<style scoped lang="scss">
	.echart-container {
		width: 100%;
		height: 100%;
	}
</style>
